<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
.button{
	background-color: #4CAF50;
	width: 250px;
	height: 40px;
	line-height: 40px;
	border: none;
	cursor: pointer;
	font-family: "微软雅黑";
	font-size: 20px;
}
.box:hover .button_hover{
	display: block;
}
.button_hover{
	display: none;
}
.button_hover a{
	display: block;
	background-color: #999;
	width: 250px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	color: black;
	text-align: center;
}
.button_hover a:hover{
	background-color: red;
}
.box{
	position: absolute;
}
.button{
	float: left;
}
.clear{
	clear: none;
}
</style>
</head>
<body>
<div style="position:relative;">
<div class="box">
<button class="button">下拉菜单</button>
	<div class="button_hover">
		<a href="#">菜单1</a>
		<a href="#">菜单2</a>
		<a href="#">菜单3</a>
	</div>
</div>
<div class="box">
<button class="button">下拉菜单</button>
	<div class="button_hover">
		<a href="#">菜单1</a>
		<a href="#">菜单2</a>
		<a href="#">菜单3</a>
	</div>
</div>
<div class="box">
<button class="button">下拉菜单</button>
	<div class="button_hover">
		<a href="#">菜单1</a>
		<a href="#">菜单2</a>
		<a href="#">菜单3</a>
	</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>